<template>
  <div class="about">
    <div class="about-main">
      <div class="about-main-user">
        <div class="about-main-user-left">
          <div class="about-main-user-left-img">'</div>
          <div class="about-main-user-left-namewrap">
            hi,
            <span class="about-main-user-left-namewrap-username">&nbsp;{{ data.username }}</span>
          </div>
        </div>
        <div class="about-main-user-middle">
          <span class="about-main-user-middle-title">余额</span>
          <span class="about-main-user-middle-number">{{ data.balance }}</span>
          <span>
            <el-button class="about-main-user-middle-put" type="primary" size="mini">充值</el-button>
            <el-button class="about-main-user-middle-price" type="primary" size="mini">费用中心</el-button>
          </span>
        </div>
        <div class="about-main-user-right">
          <span class="about-main-user-right-title">代金券</span>
          <span class="about-main-user-right-number">{{ data.cashchit }}</span>
          <span>
            <el-button class="about-main-user-right-price" type="primary" size="mini">代金券管理</el-button>
          </span>
        </div>
      </div>
      <div class="about-main-service">
        <div class="about-main-service-header">已开通服务</div>
        <div class="about-main-service-wrap">
          <div
            v-for="(item,index) in data.list"
            :key="index"
            class="about-main-service-wrap-item"
            @click="handleClickPush(item)"
          >
            <img :src="item.imgUrl" :alt="item.content">
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          log: '09-23 云视频流浪计算器，云短信用量',
          username: '潘新',
          balance: '-66.6',
          cashchit: '0',
          list: [
            {
              imgUrl: '/src/icons/educateAbout/liveCloud.png',
              content: '云直播',
              url: 'https://www.baidu.com'
            },
            {
              imgUrl: '/src/icons/educateAbout/searchCloud.png',
              content: '云搜索',
              url: 'https://www.360.com'
            },
            {
              imgUrl: '/src/icons/educateAbout/messageCloud.png',
              content: '云短信',
              url: 'https://www.360.com'
            },
            {
              imgUrl: '/src/icons/educateAbout/videoCloud.png',
              content: '云视频',
              url: 'https://www.360.com'
            }
          ]
        }
      }
    },
    methods: {
      // 跳转外部链接
      handleClickPush(item) {
        if (item.url) {
          window.open(item.url)
        }
      }
    }
  }
</script>

<style lang="scss">
  .about {
    &-header {
      width: 100%;
      height: 42px;
      line-height: 42px;
      background-color: #e6e9ed;
      font-size: 14px;
      color: #585858;
      padding-left: 20px;
    }

    &-main {
      margin-top: 20px;
      width: 100%;
      padding: 0 20px;

      &-user {
        width: 784px;
        height: 160px;
        border: 1px solid #b8b6b6;

        &-left {
          width: 160px;
          height: 158px;
          background-color: #414b5d;
          float: left;
          position: relative;

          &-img {
            position: absolute;
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background-color: #a4c6ff;
            top: 20px;
            left: 50%;
            margin-left: -33px;
          }

          &-namewrap {
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -25px;
            color: #fff;
            font-size: 16px;
            // font-weight:600;
            &-username {
              color: #5e96ff;
            }
          }
        }

        &-middle {
          width: 311px;
          height: 158px;
          border-right: 1px solid #b8b6b6;
          float: left;
          position: relative;
          background-image: url('/src/icons/educateAbout/balance.png');
          background-repeat: no-repeat;
          background-position: 95% 90%;

          &-title {
            position: absolute;
            top: 13%;
            left: 50px;
            font-size: 14px;
            color: #333333;
          }

          &-number {
            position: absolute;
            top: 34%;
            left: 50px;
            font-size: 24px;
            color: #e91d1d;
          }

          &-put {
            position: absolute;
            top: 65%;
            left: 50px;
            background-color: #3682ff;
            border-color: #3682ff;
            color: #fff;
          }

          &-price {
            position: absolute;
            top: 65%;
            left: 100px;
            font-weight: 600;
            background-color: #fff;
            border-color: #a4c6ff;
            color: #5e96ff;
          }

          &-price:hover {
            background-color: #a4c6ff;
          }
        }

        &-right {
          width: 311px;
          height: 158px;
          float: left;
          position: relative;
          background-image: url('/src/icons/educateAbout/cashchit.png');
          background-repeat: no-repeat;
          background-position: 95% 90%;

          &-title {
            position: absolute;
            top: 13%;
            left: 50px;
            font-size: 14px;
            color: #333333;
          }

          &-number {
            position: absolute;
            top: 34%;
            left: 50px;
            font-size: 24px;
            color: #e91d1d;
          }

          &-price {
            position: absolute;
            top: 65%;
            left: 50px;
            font-weight: 600;
            background-color: #fff;
            border-color: #a4c6ff;
            color: #5e96ff;
          }
        }
      }

      &-service {
        margin-top: 20px;
        width: 100%;

        &-header {
          width: 100%;
          height: 42px;
          line-height: 42px;
          padding: 0 20px;
          background-color: #f0f3ff;
          color: #585858;
          font-size: 16px;
          border-left: 1px solid #f0f3ff;
          margin-bottom: 15px;
        }

        &-wrap {
          overflow: hidden;

          &-item {
            width: 140px;
            height: 140px;
            border-radius: 5px;
            background-image: url('/src/icons/educateAbout/background.png');
            background-repeat: no-repeat;
            position: relative;
            float: left;
            margin-right: 20px;
            cursor: pointer;

            img {
              position: absolute;
              left: 50%;
              top: 25%;
              margin-left: -30px;
            }

            span {
              position: absolute;
              left: 31%;
              bottom: 8%;
              color: #4d4d4d;
            }
          }
        }
      }

      &-waitservice {
        margin-top: 20px;
        width: 100%;

        &-header {
          width: 100%;
          height: 42px;
          line-height: 42px;
          padding: 0 20px;
          background-color: #ebf4ff;
          color: #585858;
          font-size: 16px;
          border-left: 1px solid #ebf4ff;
          margin-bottom: 15px;
        }

        &-wrap {
          overflow: hidden;

          &-item {
            width: 140px;
            height: 140px;
            border-radius: 5px;
            background-image: url('/src/icons/educateAbout/background.png');
            background-repeat: no-repeat;
            position: relative;
            float: left;
            margin-right: 20px;
            cursor: pointer;

            img {
              position: absolute;
              left: 50%;
              top: 25%;
              margin-left: -30px;
            }

            span {
              position: absolute;
              left: 31%;
              bottom: 8%;
              color: #4d4d4d;
            }
          }
        }
      }
    }
  }
</style>
